<!-- 修改密码 -->
<template>
  <com-dialog class="edit-password-wp"
    v-model="visible"
    title="修改密码"
    width="600px"
    content-padding="30px 50px">
    <el-form :model="form" :rules="rules" ref="form"
      label-width="7em"
      label-position="right"
      size="small">
      <el-form-item label="旧密码" prop="oldpassword">
        <el-input v-model="form.oldpassword" type="password" placeholder="请输入旧密码" clearable></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input v-model="form.password" type="password" placeholder="请输入新密码" clearable></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="confirmpassword">
        <el-input v-model="form.confirmpassword" type="password" placeholder="请确认新密码" clearable></el-input>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button size="medium" @click="visible = false">取消</el-button>
      <el-button type="primary" size="medium" @click="submit()">确认</el-button>
    </template>
  </com-dialog>
</template>
<script>

import {sys} from "@/config/api.js";

export default {
  name: 'edit-password',
  data () {

    const checkNewPassword = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      visible: false,

      form: {
        oldpassword: '', // 旧密码
        password: '', // 新密码
        confirmpassword: '', // 确认新密码
      },

      rules: {
        oldpassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        confirmpassword: [
          { required: true, message: "请确认新密码", trigger: "blur" },
          { validator: checkNewPassword, trigger: 'blur'}
        ],
      }

    }
  },
  methods: {
    open () {
      this.setForm(); // 设置表单

      this.visible = true;
    },

    // 提交
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }

        var param = this.$g.copy(this.form);
        param.username = this.$g.userInfo().username;

        this.$put(sys.updatePassword, param).then(res => {
          this.$message.success('修改密码成功');
          this.visible = false;
        })
      })
    },

    // 设置表单
    setForm () {
      for (var key in this.form) {
        this.form[key] = '';
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.edit-password-wp {
  
}
</style>